<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>微信组件element</title>
    <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css">
    <script src="common/js/jquery-1.11.1.min.js"></script>
</head>
<body>

<!--Button-->
<a href="javascript:;" class="weui-btn weui-btn_primary">primary</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">Disabled</a>
<a href="javascript:;" class="weui-btn weui-btn_default">default</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">Disabled</a>
<a href="javascript:;" class="weui-btn weui-btn_warn">警告warn</a>
<a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">Disabled</a>

<div class="button-sp-area">
    <a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a>
    <a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a>
    <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a>
    <a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a>
    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a>
    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a>
    <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a>
</div>

<a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>绿色按钮</a>


<!--弹出层-->
<div id="actionSheet_wrap">
    <div class="weui-mask_transparent actionsheet__mask" id="mask"></div>
    <div class="weui-actionsheet" id="weui-actionsheet">                    <!--底部向上滑动显示弹出层选项IOS-->
        <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell">示例菜单</div>
            <div class="weui-actionsheet__cell">示例菜单</div>
            <div class="weui-actionsheet__cell">示例菜单</div>
            <div class="weui-actionsheet__cell">示例菜单</div>
        </div>
        <div class="weui-actionsheet__action">
            <div class="weui-actionsheet__cell" id="actionsheet_cancel">取消</div>
        </div>
    </div>

    <div class="weui-skin_android" id="weui-android-actionsheet" style="display: none">     <!--带遮罩的弹出层Android-->
        <div class="weui-mask"></div>
        <div class="weui-actionsheet">
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
                <div class="weui-actionsheet__cell">示例菜单</div>
            </div>
        </div>
    </div>
</div>


<!--徽章weui-badge-->
<span class="weui-badge weui-badge_dot"></span>     <!--无字-->
<span class="weui-badge">New</span>                 <!--有字-->

<!--Cell 列表-->
<div class="weui-cells__title">带说明的列表项</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <p>标题文字</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </div>
</div>
<div class="weui-cells__title">带图标、说明的列表项</div>
<div class="weui-cells">
    <div class="weui-cell">
        <div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
        <div class="weui-cell__bd">
            <p>标题文字</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
        <div class="weui-cell__bd">
            <p>标题文字</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </div>
</div>

<div class="weui-cells__title">带跳转的列表项</div>
<div class="weui-cells">
    <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">
        </div>
    </a>
    <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">
        </div>
    </a>
</div>

<div class="weui-cells__title">带说明、跳转的列表项</div>
<div class="weui-cells">
    <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </a>
    <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </a>

</div>

<div class="weui-cells__title">带图标、说明、跳转的列表项</div>
<div class="weui-cells">

    <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </a>
    <a class="weui-cell weui-cell_access" href="javascript:;">
        <div class="weui-cell__hd"><img src="..." alt="" style="width:20px;margin-right:5px;display:block"></div>
        <div class="weui-cell__bd">
            <p>cell standard</p>
        </div>
        <div class="weui-cell__ft">说明文字</div>
    </a>
</div>


<!--confirm-->
<div id="dialog1" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
        <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
        </div>
    </div>
</div>

<!--alert-->
<div style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__hd"><strong class="weui-dialog__title">弹窗标题</strong></div>
        <div class="weui-dialog__bd">弹窗内容，告知当前页面信息等</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
        </div>
    </div>
</div>

<!--flex布局-->
<div class="weui-flex">
    <div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<div class="weui-flex">
    <div class="weui-flex__item"><div class="placeholder">weui</div></div>
    <div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<div class="weui-flex">
    <div class="weui-flex__item"><div class="placeholder">weui</div></div>
    <div class="weui-flex__item"><div class="placeholder">weui</div></div>
    <div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>
<div class="weui-flex">
    <div class="weui-flex__item"><div class="placeholder">weui</div></div>
    <div class="weui-flex__item"><div class="placeholder">weui</div></div>
    <div class="weui-flex__item"><div class="placeholder">weui</div></div>
    <div class="weui-flex__item"><div class="placeholder">weui</div></div>
</div>

<!--通用底部-->
<div class="weui-footer">
    <p class="weui-footer__text">Copyright &copy; 2008-2016 weui.io</p>
</div>

<div class="weui-footer">       <!--带链接-->
    <p class="weui-footer__links">
        <a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
        <a href="javascript:void(0);" class="weui-footer__link">底部链接</a>
    </p>
    <p class="weui-footer__text">Copyright &copy; 2008-2016 weui.io</p>
</div>

<div class="weui-footer weui-footer_fixed-bottom" style="background-color: #fff;">      <!--浮动底部-->
    <p class="weui-footer__links">
        <a href="javascript:home();" class="weui-footer__link">WeUI首页</a>
    </p>
    <p class="weui-footer__text">Copyright &copy; 2008-2016 weui.io</p>
</div>


<!--Gallery用于实现上传图片的展示或幻灯片播放-->
<div class="weui-gallery">
    <span class="weui-gallery__img" style="background-image: url(...);"></span>
    <div class="weui-gallery__opr">
        <a href="javascript:" class="weui-gallery__del">
            <i class="weui-icon-delete weui-icon_gallery-delete"></i>
        </a>
    </div>
</div>

</body>
</html>